<!--
  功能：初始化功能描述
  作者：zichen-jiang
  邮箱：18307106535@163.com
  版本：v1.0.2
  修改内容：vue2.0初始化模板
  修改人员：zicheng-jiang
  修订时间：2020.10.01
  组件生成时间：2021年10月26日 14:53:44
-->
<template>
    <div class="Analysis">
      <header>
        <div class="box">
          <div>
            <a-icon type="transaction" style="fontSize:70px;" />
            <div>
              <h2>录入金额</h2>
              <p>
                {{data.insertSum}}
                <span>万</span>
              </p>
            </div>
          </div>
          <div>
            <a-icon type="pie-chart" style="fontSize:70px;" />
            <div>
              <h2>录入笔数</h2>
              <p>
                {{data.insertNum}}
                <span>笔</span>
              </p>
            </div>
          </div>
          <div>
            <a-icon type="history" style="fontSize:70px;" />
            <div>
              <h2>登录次数</h2>
              <p>
                {{data.loginNum}}
                <span>次</span>
              </p>
            </div>
          </div>
        </div>
        <div class="time">
          <p class="dlTime">
            登录时间：
            <span>{{data.lastTime}}</span>
          </p>
          <p class="dqTime">
            当前时间：
            <span>{{timestr}}</span>
          </p>
        </div>
      </header>
      <main>
        <img src="../../assets/undraw.png" alt width="100%" height="100%" />
        <h3>{{userName}} 您好，欢迎登录温州民间借贷备案管理系统</h3>
      </main>
  
      <!-- <activeAnaly></activeAnaly> -->
    </div>
  </template>
  <script>
  //import(导入)其他文件（如：组件，工具js，第三方插件js，json文件，图片文件等）
  import { postDataToMng } from '@/api/api'
  import activeAnaly from '../statistics/statisComponent/activeAnaly'
  export default {
    /**注册组件*/
    components: {
      activeAnaly
    },
    /**接受父组件传值*/
    props: {},
    name: 'Analysis',
    data() {
      return {
        getUserLoginInfo: '/sys/mjBase/getUserLoginInfo',
        userInfo: JSON.parse(localStorage.getItem('pro__Login_Userinfo')),
        data: {},
        timestr: '',
        userName: JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.username
      }
    },
    /**计算属性*/
    computed: {},
    /**监听data数据变化*/
  
    watch: {},
    /**所有方法*/
    methods: {
      getlist() {
        let params = {
          adminName: this.userInfo.value.username
        }
        postDataToMng(this.getUserLoginInfo, params).then(res => {
          if (res.errCode == '000000') {
            let bizContent = JSON.parse(res.bizContent)
            this.data = bizContent
            console.log(bizContent)
          } else {
            this.$message.error(res.errMsg)
          }
        })
      },
      getTime() {
        let that = this
        setInterval(() => {
          var myDate = new Date()
          var y = myDate.getFullYear()
          var M = myDate.getMonth() + 1 //获取当前月份(0-11,0代表1月)
          var d = myDate.getDate() //获取当前日(1-31)
          var h = myDate.getHours() //获取当前小时数(0-23)
          var m = myDate.getMinutes() //获取当前分钟数(0-59)
          var s = myDate.getSeconds() //获取当前秒数(0-59)
  
          //检查是否小于10
          M = check(M)
          d = check(d)
          h = check(h)
          m = check(m)
          s = check(s)
          that.timestr = y + '-' + M + '-' + d + ' ' + h + ':' + m + ':' + s
        }, 1000)
        //时间数字小于10，则在之前加个“0”补位。
        function check(i) {
          var num = i < 10 ? '0' + i : i
          return num
        }
      }
    },
    /**创建组件时执行(有VM对象this)*/
    created() {},
    /**加载完组件时执行(主要预处理数据)*/
  
    mounted() {
      this.getlist()
      this.getTime()
    },
    beforeCreate() {
      /**生命周期 - 创建之前*/
    },
    beforeMount() {
      /**生命周期 - 挂载之前*/
    },
    beforeUpdate() {
      /**生命周期 - 更新之前*/
    },
    updated() {
      /**生命周期 - 更新之后*/
    },
    beforeDestroy() {
      /**生命周期 - 销毁之前*/
    },
    destroyed() {
      /**生命周期 - 销毁完成*/
    },
    activated() {
      /**keep-alive组件激活时调用。仅针对keep-alive组件有效*/
    },
    deactivated() {
      /**keep-alive组件停用时调用。仅针对keep-alive组件有效*/
    }
  }
  </script>
  <style scoped lang='less'>
  /* @import url(); 引入css类 */
  header {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .box {
    width: 73%;
    display: flex;
    justify-content: space-between;
    > div {
      width: 32%;
      height: 120px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      transition: All 0.4s ease-in-out;
      -webkit-transition: All 0.4s ease-in-out;
      -moz-transition: All 0.4s ease-in-out;
      -o-transition: All 0.4s ease-in-out;
      > div {
        text-align: center;
        p {
          margin: 0;
          padding: 0;
          font-size: 20px;
          font-family: math;
          span {
            font-size: 15px;
            margin-left: 6px;
          }
        }
      }
    }
    > :nth-child(1) {
      background: -webkit-linear-gradient(left, #d5e1f4, #ebb6fc);
    }
    > :nth-child(2) {
      background: -webkit-linear-gradient(left, #b0c8ec, #dfecff);
    }
    > :nth-child(3) {
      background: -webkit-linear-gradient(left, #cafff3, #fbffc0);
    }
    > div:hover {
      transform: scale(1.05);
      -webkit-transform: scale(1.05);
      box-shadow: 5px 4px 9px 0px #a8a8d0;
      border-radius: 7px;
      cursor: pointer;
      color: #ffffff !important;
      h2 {
        color: #ffffff !important;
      }
    }
    // > div:hover h2 {
    //   color: #ffffff !important;
    // }
  }
  .time {
    width: 26%;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: inherit;
    > p {
      margin: 0;
      padding: 0;
      height: 55px;
      line-height: 55px;
      padding-left: 20px;
      font-size: 1.25rem;
      transition: All 0.4s ease-in-out;
      -webkit-transition: All 0.4s ease-in-out;
      -moz-transition: All 0.4s ease-in-out;
      -o-transition: All 0.4s ease-in-out;
      span {
        color: #aeb0b4;
        font-family: Audiowide;
      }
    }
    > p:hover {
      transform: scale(1.05);
      -webkit-transform: scale(1.05);
      box-shadow: 5px 4px 9px 0px #a8a8d0;
      border-radius: 7px;
      cursor: pointer;
      color: #ffffff !important;
    }
    > :nth-child(1) {
      background: -webkit-linear-gradient(left, #cad3ff, #fefefe);
    }
    > :nth-child(2) {
      background: -webkit-linear-gradient(left, #d8faf7, #f0f2f5);
    }
  }
  
  @font-face {
    font-family: 'Audiowide';
    font-style: normal;
    font-weight: 400;
    src: local('Audiowide'), local('Audiowide-Regular'),
      url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff)
        format('woff');
  }
  .Analysis {
    background: #fff;
    padding: 20px;
  }
  main {
    margin: 0 auto;
    text-align: center;
    font-size: 30px;
    font-family: fangsong;
    img {
      width: 50%;
    }
  }
  </style>
  